<template>
  <div class="member-order-page">
    <XtxTabs v-model="activeName" @tab-click="clickTab">
      <XtxTabsPanel 
      v-for="item in tabsArr" 
      :key="item.name" 
      :name="item.name" 
      :label="item.label"
      >
      </XtxTabsPanel>
    </XtxTabs>

     <!-- 订单列表 -->
     <div class="order-list">
        <div v-if="loading" class="loading"></div>
        <div class="none" v-if="!loading && orderList.length === 0">暂无数据</div>
        <OrderItem 
        v-for="item in orderList" 
        :key="item.id" 
        :order='item' 
        @on-cancel='handleCancel'
        @on-delete="handleDelete"
        @on-confirm='handleConfirm'
        @on-logistics='handleLogistics'
        />
         <!-- 分页器 --> 
        <XtxPagination 
        v-if="reqParams.total"  
        :pageSize='reqParams.pageSize'
        :total='reqParams.total'
        :currentPage='reqParams.page'
        @current-change='reqParams.page=$event'
        />
    </div>
      <!-- 取消原因 -->
      <OrderCancel @cancel-state='cancelState' ref="orderCancelCom" />
      <!-- 查看物流 -->
      <OrderLogistics ref="logisticsCon" />
  </div>
</template>

<script>
import {ref, reactive, watch} from 'vue'
import { orderStatus } from '@/api/constains'
import {findOrderList, deleteOrder, confirmOrder} from '@/api/order'
import OrderItem from './components/order-item.vue'
import OrderCancel from './components/order-cancel.vue'
import OrderLogistics from './components/order-logistics.vue'
import Confirm from '@/components/library/Confirm'
import Message from '@/components/library/Message'

export default {
  components:{OrderItem, OrderCancel, OrderLogistics},
  setup(props) {
      const activeName = ref('all')

      // 点击tabs 切换
      const clickTab = (name, index) =>{
          reqParams.page = 1
          reqParams.orderState = index
      }

      // 订单信息tabs列表
      const tabsArr = orderStatus

    // 订单列表
      const orderList = ref(null)
    // 请求参数
    const reqParams = reactive({
      page: 1,
      pageSize: 10,
      orderState:0,
      total:10
    });

    // reqParams 变化 重新加载数据
    const loading = ref(false)
    watch(reqParams, ()=>{
      //  function getOrderList(){} 函数提升  所以能调用到
      //  const getOrderList = ()=>{}  变量声明  watch 调用时函数未定义 故报错
        getOrderList()
    },{immediate:true})
    // 获取订单列表
    function getOrderList(){
        loading.value = true
       findOrderList(reqParams).then(res=>{
        orderList.value = res.result.items
        reqParams.total = res.result.counts
       loading.value = false
      })
    }

    // 取消订单结果提示
     const cancelState = ()=>{
         Message({type:'success', text:'操作成功'})
        getOrderList()
      }


    // 删除订单操作
    const handleDelete = (order) => {
      // 提示
      Confirm({title:'提示', text:'确定要删除订单吗'}).then(()=>{
        // 发送del请求
        deleteOrder().then(data=>{
          Message({type:'success', text:'删除订单成功'})
          // 重新获取数据
           getOrderList()
        })
      }).catch(err=>{})
    }
  
   
      return {
        activeName, 
        clickTab, 
        tabsArr, 
        orderList, 
        loading, 
        reqParams,
        handleDelete,
        cancelState,
        ...useCancel(),
        ...useConfirm(),
        ...useLogistics()
        }
  }
}

// 取消订单逻辑
export const useCancel = () => {
  // cancel 组件实例
  const orderCancelCom = ref(null)
  const handleCancel = (order) =>{
    console.log('open');
    orderCancelCom.value.open(order)
  }
  return {handleCancel, orderCancelCom}
}

// 确认收货
export const useConfirm = () => {
  const handleConfirm = (order) => {
    Confirm({title:'提示', text:'亲， 你确定收货吗， 收货后货款将发送给卖家'}).then(()=>{
      // 发送请求
      confirmOrder(order.id).then(res=>{
        Message({type:'success', text:'操作成功'})
      })
    },()=>{})
  }

  return {handleConfirm}
}

// 查看物流逻辑
export const useLogistics = () => {
  const logisticsCon = ref(null)
  const handleLogistics = (order) => {
    logisticsCon.value.open(order)
  }
  return { handleLogistics, logisticsCon }
}

</script>

<style scoped lang='less'>
.order-list {
  background: #fff;
  padding: 20px;
}

.order-list {
  padding: 20px;
  position: relative;
  min-height: 400px;
}
.loading {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255,255,255,.9) url(../../../assets/images/loading.gif) no-repeat center;
}
.none {
  height: 400px;
  text-align: center;
  line-height: 400px;
  color: #999;
}

</style>